@import "common";

/* 初始化body */
body {
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/*点击高亮我们需要清除清除 设置为transparent完成透明*/
* {
    -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性，才能给难喝输入框自定义样式*/
input {
    -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a {
    -webkit-touch-callout: none;
}
ul,ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

// 后续的尺寸需要用rem单位
@baseFont: 50px;

// 顶部提示
.top_tips {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: (90rem / @baseFont);
    background-color: #333;
    font-size: (28rem / @baseFont);
    line-height: (90rem / @baseFont);
    text-align: center;
    color: #fff;
    z-index: 10;
    div {
        // 关闭按钮
        &:nth-child(1) {
            width: 8%;
            img {
                width: (20rem / @baseFont);
                vertical-align: middle;
            }
        }
        // logo
        &:nth-child(2) {
            width: 10%;
            img {
                width: (60rem / @baseFont);
                vertical-align: middle;
            }
        }
        &:nth-child(3) {
            width: 57%;
        }
        &:nth-child(4) {
            width: 25%;
            background-color: #f63517;
        }
    }
}

// 搜索框区域
.search_box {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: (90rem / @baseFont);
    left: 0;
    width: 100%;
    height: (88rem / @baseFont);
    z-index: 1;
    .search_left {
        width: (80rem / @baseFont);
        height: (88rem / @baseFont);
        span {
            display: block;
            width: (40rem / @baseFont);
            height: (36rem / @baseFont);
            margin: (28rem / @baseFont) 0 0 (30rem / @baseFont);
            background: url(../images/s-btn.png) no-repeat 0 0;
            background-size: (40rem / @baseFont) (36rem / @baseFont);
        }
    }
    .login {
        width: (80rem / @baseFont);
        height: (88rem / @baseFont);
        line-height: (88rem / @baseFont);
        text-align: center;
        color: #fff;
    }
    .search {
        flex: 1;
        height: (60rem / @baseFont);
        margin: (14rem / @baseFont) (30rem / @baseFont);
        span {
            float: left;
            position: relative;
            width: (40rem / @baseFont);
            height: (30rem / @baseFont);
            margin: (16rem / @baseFont) (16rem / @baseFont) 0 (15rem / @baseFont);
            background: url(../images/logo2.png) no-repeat 0 0;
            background-size: (40rem / @baseFont) (30rem / @baseFont);
            &::after {
                position: absolute;
                right: (-14rem / @baseFont);
                content: "";
                width: (2rem / @baseFont);
                height: (32rem / @baseFont);
                background-color: #ccc;
            }
        }
        i {
            float: left;
            width: (36rem / @baseFont);
            height: (30rem / @baseFont);
            margin: (16rem / @baseFont) 0 0 (10rem / @baseFont);
            background: url(../images/jd-sprites.png) no-repeat;
            background-position: -80px 0;
            background-size: (400rem / @baseFont);
        }
        .input {
            width: 100%;
            height: (60rem / @baseFont);
            padding: 0 (20rem / @baseFont) 0 (136rem / @baseFont);
            border-radius: (30rem / @baseFont);
            background-color: #f7f7f7;
            font-size: (24rem / @baseFont);
            line-height: (60rem / @baseFont);
            box-sizing: border-box;
            input {
                width: 100%;
                height: (32rem / @baseFont);
                background-color: #f7f7f7;
                border: none;
                margin-left: (10rem / @baseFont);
                padding-left: (10rem / @baseFont);
                box-sizing: border-box;
                color: #232326;
                vertical-align: middle;
            }
        }
    }
}

// 主要内容
.content {
    width: 100%;
    margin-top: (90rem / @baseFont);
    padding-bottom: (120rem / @baseFont);
    background-color: #f6f6f6;
    // 轮播图区域样式
    .banner {
        position: relative;
        width: 100%;
        height: (374rem / @baseFont);
        overflow: hidden;
        .banner_bg {
            position: absolute;
            left: -25%;
            width: 150%;
            height: (290rem / @baseFont);
            border-bottom-left-radius: 100%;
            border-bottom-right-radius: 100%;
            background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
        }
        ul {
            position: relative;
            li {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: (374rem / @baseFont);
                padding: (88rem / @baseFont) 3.333% 0;
                box-sizing: border-box;
                &:nth-child(2) {
                    left: 100%;
                }
                &:nth-child(3) {
                    left: 200%;
                }
                a {
                    display: block;
                    img {
                        display: block;
                        width: 100%;
                        border-radius: (20rem / @baseFont);
                    }
                }
            }
        }
        .banner_pos {
            position: absolute;
            bottom: .5rem;
            width: 100%;
            text-align: center;
            span {
                display: inline-block;
                width: (10rem / @baseFont);
                height: (10rem / @baseFont);
                background: hsla(0,0%,100%,.6);
                margin: 0 (4rem / @baseFont);
                border-radius: 50%;
                box-sizing: border-box;
                &.current {
                    background-color: #fa2c19;
                }
            }
        }
    }
    // 优惠区域 使用flex
    .coupon {
        display: flex;
        width: 100%;
        overflow: hidden;
        a {
            flex: 1;
            img {
                width: 100%;
            }
        }
    }
    // 导航区域
    nav {
        position: relative;
        width: 100%;
        height: (324rem / @baseFont);
        .mall_nav {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: (324rem / @baseFont);
            a {
                width: 20%;
                height: 45.65%;
                font-size: (24rem / @baseFont);
                text-align: center;
                color: #666;
                text-decoration: none;
                img {
                    display: block;
                    width: 53%;
                    margin: (16rem / @baseFont) auto 0;
                }
                span {
                    display: block;
                    margin-top: (9.6rem / @baseFont);
                }
            }
        }
        .nav_pos {
            display: flex;
            justify-content: center;
            position: absolute;
            left: 0;
            bottom: (2rem / @baseFont);
            width: 100%;
            height: (12rem / @baseFont);
            span {
                width: (10rem / @baseFont);
                height: (10rem / @baseFont);
                margin: 0 (6rem / @baseFont);
                background-color: #ccc;
                vertical-align: middle;
                border-radius: 50%;
                &.current {
                    background-color: #fa2c19;
                }
            }
        }
    }
    // 新人专享
    .new_member {
        display: flex;
        width: 100%;
        padding: (10rem / @baseFont) (20rem / @baseFont) 0;
        box-sizing: border-box;
        overflow: hidden;
        a {
            flex: 1;
            img {
                width: 100%;
            }
        }
    }
    // 精选好物区域
    .good_item {
        width: 100%;
        height: (510rem / @baseFont);
        .container {
            display: flex;
            flex-wrap: wrap;
            width: 94.44444%;
            height: (484rem / @baseFont);
            margin: 0 (20rem / @baseFont) (20rem / @baseFont);
            box-sizing: border-box;
            background-color: #fff;
            border-radius: (30rem / @baseFont);
            overflow: hidden;
            a {
                width: 25%;
                height: (240rem / @baseFont);
                padding: 0.325rem 0;
                box-sizing: border-box;
                text-decoration: none;
                &:nth-child(1) {
                    width: 50%;
                }
                &:nth-child(2) {
                    width: 50%;
                }
                span {
                    display: block;
                    height: (44rem / @baseFont);
                    padding-left: (18rem / @baseFont);
                    padding-top: (13rem / @baseFont);
                    font-size: (32rem / @baseFont);
                    line-height: (44rem / @baseFont);
                    color: #000;
                }
                p {
                    margin: 0;
                    padding: 0 0 0 (18rem / @baseFont);
                    font-size: (24rem / @baseFont);
                    color: #666771;
                }
                .img_c {
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    padding: 0 (28rem / @baseFont);
                    box-sizing: border-box;
                    overflow: hidden;
                    img {
                        width: (120rem / @baseFont);
                        margin: (11rem / @baseFont) (14rem / @baseFont) 0;
                    }
                }
            }
        }
    }
    // 商品区域样式
    .shop {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 (20rem / @baseFont);
        box-sizing: border-box;
        overflow: hidden;
        li {
            width: 50%;
            height: (546rem / @baseFont);
            padding: 0 (10rem / @baseFont) (20rem / @baseFont) 0;
            box-sizing: border-box;
            &:nth-child(2n) {
                padding: 0 0 (20rem / @baseFont) (10rem / @baseFont);
            }
            .shop_c {
                width: 100%;
                height: 100%;
                border-radius: (30rem / @baseFont);
                background-color: #fff;
                overflow: hidden;
                .shop_img {
                    display: block;
                    width: 100%;
                }
                .shop_descript {
                    display: inline-block;
                    max-width: 100%;
                    width: 100%;
                    height: (64rem / @baseFont);
                    margin: (10rem / @baseFont) 0 (6rem / @baseFont);
                    font-size: (26rem / @baseFont);
                    line-height: (32rem / @baseFont);
                    color: #1a1a1a;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    img {
                        display: inline-block;
                        width: (90rem / @baseFont);
                        height: (26rem / @baseFont);
                    }
                }
                p {
                    position: relative;
                    width: 100%;
                    height: (52rem / @baseFont);
                    margin: 0;
                    .money {
                        height: (52rem / @baseFont);
                        padding: 0 (10rem / @baseFont);
                        font-size: (32rem / @baseFont);
                        color: #fa2c19;
                        line-height: (52rem / @baseFont);
                    }
                    .quick_pay {
                        display: inline-block;
                        width: (64rem / @baseFont);
                        height: (32rem / @baseFont);
                        padding: 0 (6rem / @baseFont);
                        margin-right: (10rem / @baseFont);
                        border: (2rem / @baseFont) solid #fa2c19;
                        font-size: (24rem / @baseFont);
                        line-height: (32rem / @baseFont);
                        text-align: center;
                        color: #fa2c19;
                        box-sizing: border-box;
                    }
                    .like_shop {
                        display: inline-block;
                        position: absolute;
                        right: (-6rem / @baseFont);
                        top: (4rem / @baseFont);
                        width: (72rem / @baseFont);
                        height: (44rem / @baseFont);
                        padding: 0 (10rem / @baseFont);
                        background-color: #f0f2f5;
                        border-radius: 0.55rem;
                        font-size: (24rem / @baseFont);
                        color: #808080;
                        line-height: (44rem / @baseFont);
                        text-align: center;
                    }
                }
            }
        }
    }
}

// 底部导航区域样式
.bottom_nav {
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: (100rem / @baseFont);
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 5px 0 hsl(0deg 6% 58% / 60%);
    overflow: hidden;
    a {
        flex: 1;
        img {
            display: block;
            width: (130rem / @baseFont);
            margin: 0 auto;
        }
    }
}